<template>
  <el-container style="margin-top: 10px">
    <el-header>
      <el-card style="height: 75px">
        <el-button
          icon="el-icon-plus"
          size="mini"
          type="primary"
          @click="topAddActivity"
        >
          添加活动
        </el-button>
        <el-switch
          v-model="isOpen"
          style="margin-left: 30px;"
          active-text="开启活动"
          inactive-text="关闭活动"
          @change="switchChange"
        />
      </el-card>
    </el-header>

    <el-main>
      <el-card>
        <el-table v-loading="loading" :data="activityList">
          <el-table-column align="center" label="图片">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.background_img" alt="图片">
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="content" label="活动文案" />
          <el-table-column align="center" prop="card_study_num" label="学习卡次数" />
          <el-table-column align="center" prop="study_end_date" label="到期时间" />
          <el-table-column align="center" prop="condition" label="活动条件" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="hanldePreview(scope.row.id)"
              >查看</el-button>

              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="handleDelete(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>

    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>
    <el-dialog title="添加弹窗活动" :visible.sync="dialogVisible" @close="dialogClose">
      <el-form ref="dialog" :model="addActivityObj" :rules="rule" label-position="" label-width="120px">
        <el-form-item label="活动文案:" prop="content">
          <el-input v-model="addActivityObj.content" />
        </el-form-item>
        <el-form-item label="学习卡次数:" prop="card_study_num">
          <el-input v-model="addActivityObj.card_study_num"  type="number"/>
        </el-form-item>
        <el-form-item label="到期时间:" prop="study_end_date">
          <el-date-picker
            v-model="addActivityObj.study_end_date"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="活动条件:" prop="condition">
          <el-input v-model="addActivityObj.condition" type="number"/>
        </el-form-item>
        <el-form-item label="封面图" prop="background_img">
          <el-upload
            class="avatar-uploader"
            :action="upload_url"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload"
            :headers="header"
          >
            <img v-if="addActivityObj.background_img" :src="addActivityObj.background_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <span slot="tip" class="el-upload__tip">图片大小不能超过2M</span>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="disabled" type="primary" class="iconfont iconicon_add" @click="addActitvty">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import { addActitvty, getActitvtyList, delActitvty, getActivityPushInfo, updateActivity, changeActivityPush, getActivityInfo } from '@/api/setting'
import { getToken } from '@/utils/auth'
const baseUrl = process.env.VUE_APP_BASE_API
export default {
  data() {
    return {
      createOrUpdate: 'create',
      isOpen: true,
      disabled: false,
      loading: false,
      dialogVisible: false,
      activityList: [],
      total: 0,
      page: 1,
      pageSize: 10,
      upload_url: baseUrl + '/admin/user/uploadImage',
      header: {
        Authorization: getToken()
      },
      activity_images_list: [],
      addActivityObj: {
        background_img: '',
        content: '',
        card_study_num: '',
        study_end_date: '',
        condition: ''
      },
      rule: {
       
        content: [
          { required: true, message: '活动文案为必填项', trigger: 'blur' },
          // { min: 10, message: '活动文案最少10个字', trigger: 'blur' }
        ],
        card_study_num: [
          { required: true, message: '学习卡次数为数字', trigger: 'blur' }
        ],
        study_end_date: [
          { required: true, message: '到期时间为必填项', trigger: 'blur' }
        ],
        condition: [
          { required: true, message: '活动条件为数字', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getActitvtyList()
    this.getActivityPushInfo()
  },
  methods: {
    uploadSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.addActivityObj.background_img = response.data.url
      } else {
        this.$message.error(response.msg)
      }
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    uploadListSuccess(response, file, fileList) {
      if (response.code == 200) {
        this.activity_images_list.push(response.data.url)
      } else {
        this.$message.error(response.msg)
      }
    },
    getActitvtyList() {
      this.loading = true
      const params = {
        page: this.page,
        page_size: this.pageSize
      }
      getActitvtyList(params).then(res => {
        this.activityList = res.data.list
        this.total = res.data.paginate.total
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    },
    getActivityPushInfo() {
      getActivityPushInfo().then(res => {
        if (res.data.push_flag == '2') {
          this.isOpen = true
        } else {
          this.isOpen = false
        }
      })
    },
    switchChange(e) {
      const obj = { push_flag: '' }
      if (e) {
        obj.push_flag = '2'
      } else {
        obj.push_flag = '1'
      }
      changeActivityPush(obj).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
        } else {
          if (this.isOpen) {
            this.isOpen = false
          } else {
            this.isOpen = true
          }
        }
      }).catch(res => {
        if (this.isOpen) {
          this.isOpen = false
        } else {
          this.isOpen = true
        }
      })
    },
    handleCurrentChange(e) {
      this.page = e
      this.getActitvtyList()
    },
    addActitvty() {
      this.$refs.dialog.validate(valid => {
        if (!valid) {
          return false
        }
       
        if (this.createOrUpdate=='create') {
          addActitvty(this.addActivityObj).then(res => {
            this.$message.success(res.msg)
            this.dialogVisible = false
             this.disabled = true
            this.getActitvtyList()
          }).catch(err => {
            this.dialogVisible = true
          })
        } else{
          //否则就是更新修改
          updateActivity(this.addActivityObj).then(res=>{
            this.$message.success(res.msg)
            this.dialogVisible = false
            this.getActitvtyList()
             this.disabled = true
          }).catch(err => {
            this.dialogVisible = true
          })
        }

      })
    },
    topAddActivity() {
      this.dialogVisible = true
      this.createOrUpdate = 'create'
    },
    hanldePreview(id) {
      this.dialogVisible = true
      this.createOrUpdate = 'update'
      let obj = { activity_id: id }
      getActivityInfo(obj).then(res => {
        this.addActivityObj = res.data
        this.addActivityObj.activity_id = res.data.id
      })
    },
    handleDelete(id) {
      this.$confirm('确认删除,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 如果点击了确定 则执行的逻辑
        delActitvty({ activity_id: id }).then(res => {
          this.$message.success(res.msg)
          this.getActitvtyList()
        })
      })
    },
    dialogClose() {
      this.disabled = false
      this.addActivityObj = {
        background_img: '',
        content: '',
        study_num: '',
        end_date: '',
        condition: ''
      }
    }
  }
}
</script>

<style>
  img{
    width: 100px;
    height: 100px;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
      border-color: #409eff;
  }
  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
  }
</style>
